<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#msg{margin: 50px;font-size: 50px;}
			.btnstyle{margin: 0px 0px 0px 50px;}
		</style>
	</head>
	<body>
		<div id="msg">0</div>
		
		<div class="btnstyle">
			<button id="btnStart" onclick="start();">开始计时</button>
			<button id="btnStop" onclick="stop()">结束计时</button>
		</div>
	</body>
	
	<script>
		var count = 0;       /*总的计时*/
		var timer;           /*定时器*/
		var clickstart = 0;  /*是否开始,表示*/
		
		/*获得按钮对象*/
		var btnStart = document.getElementById("btnStart");
		var mag = document.getElementById("mag");
		
		/*点击开始,计时定时刷新+n,按钮名称:暂停计时*/
		function start(){	
			if(clickstart %2 !=0){/*第一点击按钮,创建定时器*/
				timer = setInterval(function(){/*匿名函数*/
					count = count + 1;/*每10毫秒, 自增*/
					msg.innerText = count;
				},1000);
				clickstart++;
				
				btnStart.innerText = "暂停计时";
			}else{/*第二次点击按钮,清楚定时器*/
				clearInterval(timer);
				clickstart = 1;
				btnStart.innerText = "开始计时";
			}
				
		}
		
		/*点击结束,清楚定时器, 按钮的总值=0,按钮名称:开始计时*/
		function stop(){
			count = 0;
			msg.innerText = count;
			clearInterval(timer);     /*清楚定时器*/
			btnStart.innerText = "开始计时";
		}
	</script>
</html>
